<template>
  <div v-if="number !== undefined" class="disFlx gap-8 flexCenter _mt-8">
    <div  style="color:#86909C">{{ title }}</div>
    <div :class="numberClass" class="number">
      <span>
        {{ number || 0 }}
      </span>
    </div>
  </div>
  <div v-else class="disFlx gap-8 flexCenter _mt-8">&nbsp;</div>
</template>

<script>
export default {
  props: {
    number: {
      type: Number | String,
      default: undefined
    },
    title: {
      type: String,
      default: '今日'
    }
  },
  computed: {
    numberClass() {
      if (parseFloat(this.number) < 0) {
        return 'subtraction'
      }
      return 'addition'
    }
  }
}
</script>
<style lang="less" scoped>
.number {
  display: flex;
  align-items: center;
}
.subtraction {
  color: red;
}
.addition {
  color: #00b42a;
  &::before {
    content: '+';
  }
}
.zero {
  color: red;
}
</style>
